add task solution #983

1luki9901 · 2024-10-13T19:36:57Z

- [DEMO LINK](https://1luki9901.github.io/js_2048_game/)

mateacademy-ai-mentor

You're doing a great job! 😊 However, there are a few areas that need some improvement for the code to be more efficient and user-friendly. Please consider the feedback and make the necessary changes. Keep up the good work! 👍

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-10-13T19:37:20Z

src/scripts/main.js

+const Game = require('../modules/Game.class');
+
+// eslint-disable-next-line no-unused-expressions
+('use strict');


The 'use strict' directive is usually placed at the beginning of a script, it's not working after the first executable statement.

mateacademy-ai-mentor · 2024-10-13T19:37:20Z

src/scripts/main.js

+const Game = require('../modules/Game.class');
+
+// eslint-disable-next-line no-unused-expressions
+('use strict');

 // Uncomment the next lines to use your game instance in the browser
 // const Game = require('../modules/Game.class');


This commented out line of code seems to be unnecessary since the Game class is already imported at the beginning of the file. It's a good practice to remove commented out code to keep your codebase clean.

mateacademy-ai-mentor · 2024-10-13T19:37:20Z

src/scripts/main.js

+    const state = game.getState();
+    const cells = gameBoard.getElementsByClassName('field-cell');


It's generally a good practice to cache DOM elements that you'll need to reference multiple times. Consider storing the 'cells' collection in a variable outside of the 'updateUI' function. This way, you won't need to query the DOM every time 'updateUI' is called, which can improve performance.

mateacademy-ai-mentor · 2024-10-13T19:37:20Z

src/scripts/main.js

+  startButton.addEventListener('click', () => {
+    if (game.getStatus() === 'playing') {
+      game.restart();
+    } else {
+      game.start();
+    }
+    updateUI();
+    startButton.textContent = 'Restart';
+  });


The click event listener on the 'startButton' is changing the button's text content to 'Restart' every time it's clicked. This could potentially be confusing to the user if the game is already in progress. Consider updating the button's text context based on the game's status.

mateacademy-ai-mentor · 2024-10-13T19:37:20Z

src/scripts/main.js

+  document.addEventListener('keydown', (event) => {
+    let moved = false;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        moved = game.moveLeft();
+        break;
+      case 'ArrowRight':
+        moved = game.moveRight();
+        break;
+      case 'ArrowUp':
+        moved = game.moveUp();
+        break;
+      case 'ArrowDown':
+        moved = game.moveDown();
+        break;
+    }
+
+    if (moved) {
+      updateUI();
+    }
+  });


The 'keydown' event listener is currently set on the 'document'. This means that any key press will trigger this event, even when the user is not focused on the game. Consider setting the 'keydown' event listener on a specific element related to the game, to ensure that the game controls only function when the game is in focus.

mateacademy-ai-mentor

Great job so far! 😊 There are a few areas that need improvement for better performance and readability. Please consider the provided feedback and make the necessary changes. Keep going! 💪

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-10-14T19:42:19Z

src/scripts/main.js

+// const Game = require('../modules/Game.class');
+
+// eslint-disable-next-line no-unused-expressions
+('use strict');


The 'use strict' directive is not needed here since it's already inside a module. Modules are always in strict mode.

mateacademy-ai-mentor · 2024-10-14T19:42:19Z

src/scripts/main.js

+  function updateUI() {
+    const state = game.getState();
+
+    for (let i = 0; i < cells.length; i++) {
+      const cell = cells[i];
+      const value = state[Math.floor(i / 4)][i % 4];
+
+      cell.className = 'field-cell';
+
+      if (value) {
+        cell.classList.add(`field-cell--${value}`);
+        cell.textContent = value;
+      } else {
+        cell.textContent = '';
+      }
+    }
+    scoreElement.textContent = game.getScore();
+    statusElement.textContent = game.getStatus();
+  }


This updateUI function seems to be doing a lot of work. It might be more efficient to only update the parts of the UI that have changed, rather than updating the entire UI every time.

mateacademy-ai-mentor · 2024-10-14T19:42:19Z

src/scripts/main.js

+  gameBoard.addEventListener('keydown', (event) => {
+    let moved = false;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        moved = game.moveLeft();
+        break;
+      case 'ArrowRight':
+        moved = game.moveRight();
+        break;
+      case 'ArrowUp':
+        moved = game.moveUp();
+        break;
+      case 'ArrowDown':
+        moved = game.moveDown();
+        break;
+    }
+
+    if (moved) {
+      updateUI();
+    }
+  });


This event listener for keydown events on the gameBoard element might not work as expected. The keydown event is typically listened for on the document or window object, not on specific elements, unless those elements are focused. You may want to reconsider where you're attaching this event listener.

mateacademy-ai-mentor · 2024-10-14T19:42:19Z

src/scripts/main.js

+    switch (event.key) {
+      case 'ArrowLeft':
+        moved = game.moveLeft();
+        break;
+      case 'ArrowRight':
+        moved = game.moveRight();
+        break;
+      case 'ArrowUp':
+        moved = game.moveUp();
+        break;
+      case 'ArrowDown':
+        moved = game.moveDown();
+        break;


The switch-case statement here could be simplified by using an object mapping instead. This would map each key to a corresponding function on the game object, reducing the amount of code and improving readability.

Zibi95

Demo link doesn't work.

Zibi95 · 2024-10-16T13:55:36Z

src/scripts/main.js

@@ -1,7 +1,69 @@
-'use strict';
+// const Game = require('../modules/Game.class');

 // Uncomment the next lines to use your game instance in the browser


Where is that file?

1luki9901 · 2024-10-16T21:10:47Z

Zibi95

The link you provided doesn't work. I noticed that the Game.class file is present, but there haven't been any changes made to it. You need to implement all the logic within that file to make the game functional.

Zibi95

rerequest

Zibi95

Hey. Good job with implementation, but I need working DEMO link so I can check if everything is working. You have to run npm run deploy in the terminal.

1luki9901 · 2024-10-23T19:58:28Z

npm run deploy nie działa

Zibi95

Let's resolve the problem on the Mate Academy chat, and once you successfully deploy, you can request a review again.

Zibi95

Game doesn't work at all. After clicking start button nothing happens.

1luki9901 · 2024-10-26T17:12:08Z

2048.-.Google.Chrome.2024-10-26.19-09-42.mp4

No właśnie nie ogarniam czemu

add task solution

0827f68

mateacademy-ai-mentor suggested changes Oct 13, 2024

View reviewed changes

add task solution

8e8b911

1luki9901 requested a review from mateacademy-ai-mentor October 14, 2024 19:41

mateacademy-ai-mentor suggested changes Oct 14, 2024

View reviewed changes

add task solution

ea00f5f

1luki9901 requested a review from mateacademy-ai-mentor October 15, 2024 20:04

Zibi95 suggested changes Oct 16, 2024

View reviewed changes

add task solution

1183e29

1luki9901 requested review from Zibi95 October 16, 2024 21:01

Zibi95 suggested changes Oct 17, 2024

View reviewed changes

add task solution

f37c7d5

1luki9901 closed this Oct 17, 2024

1luki9901 deleted the develop branch October 17, 2024 19:33

1luki9901 restored the develop branch October 17, 2024 19:38

1luki9901 reopened this Oct 17, 2024

add task solution

550f6cb

Zibi95 suggested changes Oct 22, 2024

View reviewed changes

1luki9901 requested a review from Zibi95 October 22, 2024 17:38

Zibi95 suggested changes Oct 23, 2024

View reviewed changes

1luki9901 requested a review from Zibi95 October 24, 2024 11:04

Zibi95 suggested changes Oct 24, 2024

View reviewed changes

add task solution

faeb265

1luki9901 requested review from Zibi95 October 25, 2024 09:24

Zibi95 suggested changes Oct 25, 2024

View reviewed changes

add task solution

2743aaa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #983

add task solution #983

1luki9901 commented Oct 13, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 13, 2024

mateacademy-ai-mentor Oct 13, 2024

mateacademy-ai-mentor Oct 13, 2024

mateacademy-ai-mentor Oct 13, 2024

mateacademy-ai-mentor Oct 13, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 14, 2024

mateacademy-ai-mentor Oct 14, 2024

mateacademy-ai-mentor Oct 14, 2024

mateacademy-ai-mentor Oct 14, 2024

Zibi95 left a comment

Zibi95 Oct 16, 2024

1luki9901 commented Oct 16, 2024

Zibi95 left a comment

Zibi95 left a comment

Zibi95 left a comment

1luki9901 commented Oct 23, 2024

Zibi95 left a comment

Zibi95 left a comment

1luki9901 commented Oct 26, 2024

		const state = game.getState();
		const cells = gameBoard.getElementsByClassName('field-cell');

add task solution #983

Are you sure you want to change the base?

add task solution #983

Conversation

1luki9901 commented Oct 13, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zibi95 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1luki9901 commented Oct 16, 2024

Zibi95 left a comment

Choose a reason for hiding this comment

Zibi95 left a comment

Choose a reason for hiding this comment

Zibi95 left a comment

Choose a reason for hiding this comment

1luki9901 commented Oct 23, 2024

Zibi95 left a comment

Choose a reason for hiding this comment

Zibi95 left a comment

Choose a reason for hiding this comment

1luki9901 commented Oct 26, 2024